<template>
    <div class="subpage purchase-order-container">
        <ul class="order-tabs">
            <li v-for="(item, index) in orderTabList" :key="index" :class="index == activeTab ? 'order-tab-active' : ''" @click="changeOrderList(item.index, item.type)">{{item.name}}</li>
        </ul>
        <div class="order-list-container">
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                <van-list
                    v-model="loading"
                    :immediate-check="false"
                    :finished="finished"
                    finished-text="已加载全部了哦～"
                    @load="onLoadMore"
                    v-if="listData.length > 0"
                >
                    <PurchaseOrderListBase :listData="listData"></PurchaseOrderListBase>
                </van-list>
                <div class="no-data-box" v-else>
                    <img src="@/assets/img/order_empty.png" alt="" v-show='showNoInfo'>
                    <span v-show='showNoInfo'>{{noDataText}}</span>
                </div>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script>
import Storage from "@/utils/storage";
import { List, PullRefresh } from 'vant';
import PurchaseOrderListBase from '../../../components/orderComPonents/PurchaseOrderListBase.vue';
export default {
    components:{
        [List.name]:List,
        [PullRefresh.name]:PullRefresh,
        PurchaseOrderListBase
    },
    data() {
        return {
            orderTabList: [
                {
                    name: '全部',
                    type: null,
                    index: 0
                },
                {
                    name: '待付款',
                    type: 0,
                    index: 1
                },
                {
                    name: '养殖中',
                    type: 1,
                    index: 2
                },
                {
                    name: '待收货',
                    type: 9,
                    index: 3
                },
                {
                    name: '已完成',
                    type: 3,
                    index: 4
                },
            ],
            activeTab: 0,
            orderType: null,
            listData: [],
            loading: false,
            finished: false,
            isLoading: false,
            pageIndex: 1,
            pageSize: 10,
            noDataText: '您还没有采购订单哦，赶快去采购吧！',
            showNoInfo: false
        };
    },
    created() {
        this.getOrderList()
    },
	mounted(){
		//  采购支付存储状态清除
		Storage.del('checkedXY');
		Storage.del('checkedZF');
		Storage.del('checkedYE')
	},
    methods: {
        resetParams() {
            this.listData = [];
            this.loading = false;
            this.finished = false;
            this.pageIndex = 1;
            this.showNoInfo = false;
        },
        changeOrderList(index, type) { //切换订单状态
            if(this.activeTab == index){
                return;
            }
            this.activeTab = index;
            this.orderType = type;
            this.isLoading = true;
            this.onRefresh()
            switch(index) {
                case 0:
                    this.noDataText = '您还没有采购订单哦，赶快去采购吧！';
                    break;
                case 1:
                    this.noDataText = '您还没有待付款订单哦~';
                    break;
                case 2:
                    this.noDataText = '您还没有养殖中订单哦~';
                    break;
                case 3:
                    this.noDataText = '您还没有待收货订单哦~';
                    break;
                case 4:
                    this.noDataText = '您还没有已完成订单哦~';
                    break;
                default:
                    this.noDataText = '暂无数据';
                    break;
            }
        },
        getOrderList() { //获取订单数据
            let postData = {
                pgCt: this.pageIndex,
                pgSz: this.pageSize,
                type: this.orderType
            }
            let apiUrl = this.pageIndex > 1 ? '/api/order/user_list?noLoading' : '/api/order/user_list';
            this.$api.post(apiUrl, postData)
                .then((res) => {
                    this.showNoInfo = res.data.total > 0 ? false : true;
                    this.listData = this.listData.concat(res.data.records);
                    // 数据全部加载完成
                    if(this.pageIndex > 1 && res.data.records.length < 10){
                        this.finished = true;
                    }
                })
        },
        onRefresh() { //下拉刷新
            this.resetParams()
            setTimeout(() => {
                this.getOrderList();
                this.isLoading = false;
            }, 500);
        },
        onLoadMore() { //上拉加载
            // 异步更新数据
            setTimeout(() => {
                this.pageIndex++;
                this.getOrderList()
                // 加载状态结束
                this.loading = false;
            }, 500);
        },
    }
}
</script>
    
<style lang="scss" scoped>
    .order-tabs {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
        width: 100%;
        height: 48px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0 6px;
        box-sizing: border-box;
        background-color: #fff;
        li {
            padding: 0 4px;
            box-sizing: border-box;
            height: 48px;
            line-height: 48px;
            font-size: 16px;
            color: #5D6164;
            &.order-tab-active {
                position: relative;
                color: #31BC8D;
                &::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 2px;
                    background-color: #31BC8D;
                }
            }
        }
    }
    .order-list-container {
        width: 100%;
        height: calc(100% - 48px);
        margin-top: 48px;
        overflow-y: scroll;
        .no-data-box {
            width: 100%;
            height: calc(100vh - 48px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: #999;
            img {
                width: 104px;
                height: 104px;
                object-fit: cover;
                margin-top: -90px;
                margin-bottom: 14px;
            }
        }
    }
</style>